<template>
	<view class="list-container">
		<view class="certList" v-if="list.length>0">
			<view v-for="(item,index) in list" :key="index" class="cert-item">
				<image v-if="item.is_pay!='1'" src="../../static/imgs/mine/jiangbei.jpg" mode="widthFix" class="cert-item_cert"></image>
				<image v-else :src="item.cert" mode="widthFix" class="cert-item_cert"></image>
				<view class="text_black cert-item_title">{{item.remark}}体能训练 {{item.name}}</view>
				<view class="cert-item_text">
					<image src="../../static/imgs/mine/jieduan.png"></image>
					<view class="text_opblack">
						第一届校园线上体能运动会
						<text style="margin-left: 20rpx;" v-for="(sitem,sindex) in sections" :key="sindex"
							v-if="sitem.section_id==item.section_id">{{sitem.name}}</text>阶段 
					</view>
				</view>
				<view class="cert-item_tips">
					<text v-if="item.is_pay=='1'">恭喜您完成了训练打卡，根据我们的评分，您已获得 “优秀体能训练”电子证书。（您如果需要纸质证书/奖杯，可点击下方按钮。）</text>
					<text v-else>恭喜您完成了训练打卡，根据我们的评分，您已获得 “优秀体能训练”电子证书，同时您也购买了纸质证书/奖杯，点击下方按钮，查看进度。</text>
				</view>
				<view class="cert-item_details">
					<image src="../../static/imgs/mine/bianhao.png"></image>
					<text class="text_opblack">{{item.code}}</text>
				</view>
				<image v-if="item.is_pay!='1'" src="../../static/imgs/mine/payer.png" class="cert-item_payer"></image>
				<view class="cert-item_pay">
					<image @click="goItem(item)" v-if="item.is_pay=='1'" src="../../static/imgs/mine/goumai.png">
						</image>
					<image @click="goItem(item)" v-else src="../../static/imgs/mine/yigoumai.png"></image>
					<!-- <image src="../../static/imgs/mine/shareZhenshu.png" class="cert-item_pay_share"></image> -->
				</view>
			</view>
		</view>
		<view v-else class="text_opblack noList">暂无内容~</view>
	</view>
</template>

<script>
	import {
		getSportCert,
		getSportIndex,
		getSportCertDetail
	} from "../../static/js/api/games.js";
	import newList from "../../components/new_list/index.vue"
	export default {
		components: {
			newList
		},
		data() {
			return {
				list: [],
				sections: [],
			}
		},
		onLoad(option) {
			this.getData()
			this.getSection()
		},
		methods: {
			getData() {
				getSportCert().then(res => {
					console.log(res)
					this.list = res
				})
			},
			// 获取阶段
			getSection() {
				getSportIndex().then(res => {
					this.sections = res.sections
				})
			},
			goItem(item) {
				// if (this.sections.length > 0) {
				// 	this.sections.forEach(sitem => {
				// 		if (sitem.section_id == item.section_id) {
				// 			item.section_name = sitem.name
				// 		}
				// 	})
				// }
				// uni.navigateTo({
				// 	url: "/pages/mine/certificateDetail?code=" + item.code + '&section_name=' + item.section_name
				// })
				
				
				getSportCertDetail({
					code:item.code
				}).then(res=>{
					console.log(res)
					let details= res.cert
					details.price = res.price
					let params = {
						sport_id:details.sport_id,
						user_id:details.id,
						price:details.price
					}
					if(item.is_pay=='1'){
						uni.navigateTo({
							url:"/pages/mine/honorDetails?params="+JSON.stringify(params),
						})
					}else{
						uni.navigateTo({
							url:"/pages/mine/certPaid?params="+JSON.stringify(params),
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text_black {
		color: $uni-text-color-black;
		font-weight: bold;
	}

	.text_opblack {
		color: $uni-text-color-opblack;
	}
	.noList{
		text-align: center;
		padding-top: 60rpx;
	}

	.list-container {
		.cert-item {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			// text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #333;
			line-height: 36rpx;
			background-color: #fff;
			margin-bottom: 10rpx;
			position: relative;
			&_cert{
				width: 100%;
			}
			&_title{
				font-size: 40rpx;
				font-weight: 500;
				margin-top: 14rpx;
			}
			&_text {
				display: flex;
				align-items: center;
				width: 100%;
				font-size: 26rpx;
				margin-top: 24rpx;
				image{
					width: 124rpx;
					height: 52rpx;
					margin-right: 20rpx;
				}
			}
			&_tips{
				font-size: 30rpx;
				font-weight: 400;
				line-height: 56rpx;
				padding-bottom: 20rpx;
				margin-top: 10rpx;
				border-bottom: 2rpx solid #E8E8E8;
			}
			&_payer{
				width: 130rpx;
				height: 130rpx;
				position: absolute;
				bottom: 164rpx;
				right: 30rpx;
				background-color: #fff;
			}
			&_details{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				image{
					width: 124rpx;
					height: 52rpx;
					margin-right: 20rpx;
					
				}
			}
			&_pay{
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 470rpx;
					height: 88rpx;
				}
				&_share{
					width: 48rpx!important;
					height: 48rpx!important;
				}
			}
		}
	}
</style>